<!--学生成绩-->
<template>
  <div class="table">
    <p class="title"></p>
    <section class="content-el">
      <div class="wrapper">

        <ul class="top">
          <li class="order">成绩列表</li>
        </ul>
      </div>

      <el-table ref="filterTable" :data="score" v-loading="loading">
        <el-table-column
          prop="answerDate"
          label="考试日期"
          sortable
          width="200"
          column-key="answerDate">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="课程名称"
          width="250"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag>{{scope.row.subject}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="scores" label="考试分数" width="150"></el-table-column>
        <el-table-column label="是否及格" width="150">
          <template slot-scope="scope">
            <el-tag :type="scope.row.scores>= 60 ? 'success' : 'danger'">{{scope.row.scores >= 60 ? "及格" : "不及格"}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="" width="150">

          <template slot-scope="scope">
<!--            <el-button type="primary" size="small" @click="toDetailMsg(this.scope.row.scoreID)">查看作答详情</el-button>-->
            <el-button type="primary" size="small" @click="toDetailMsg(4)">查看作答详情</el-button>


          </template>
        </el-table-column>


      </el-table>
      <el-row type="flex" justify="center" align="middle" class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[4,6,8,10]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </el-row>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pagination: { //分页后的留言列表
        current: 1, //当前页
        total: null, //记录条数
        size: 10 //每页条数
      },
      loading: false, //加载标识符
      score: [], //学生成绩
      filter: null //过滤参数
    }
  },
  created() {
    this.getScore()
    this.loading = true //数据加载则遮罩表格
  },
  methods: {
    getScore() {
      let studentId = this.$cookies.get("cid")
      this.$axios(`/api/score/${this.pagination.current}/${this.pagination.size}/${studentId}`).then(res => {
        if(res.data.code == 200) {
          this.loading = false //数据加载完成去掉遮罩
          this.score = res.data.data
          this.pagination = {...res.data.data}
          let mapVal = this.score.map((element,index) => { //通过map得到 filter:[{text,value}]形式的数组对象
            let newVal = {}
            newVal.text = element.answerDate
            newVal.value = element.answerDate
            return newVal
          })
          let hash = []
          const newArr = mapVal.reduce((item, next) => { //对新对象进行去重操作
            hash[next.text] ? '' : hash[next.text] = true && item.push(next);
            return item
          }, []);
          this.filter = newArr
        }
      })
    },
    // 页大小
    handleSizeChange(val) {
      this.pagination.size = val
      this.getScore()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getScore()
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },


    //跳转到成绩详情页
    toDetailMsg(scoreID) {
      this.$router.push({path: '/scoreDetail', query: {scoreID: scoreID}})
      console.log(scoreID)
    }
  }
};
</script>

<style lang="less" scoped>
.pagination {
  padding-top: 20px;
}
.table {
  width: 980px;
  margin: 0 auto;
  .title {
    margin: 20px;
  }
  .content-el {
    background-color: #fff;
    padding: 20px;
  }
}

.wrapper .top .order {
  font-weight: bold;
  margin-bottom: 20px;
}

.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.wrapper .top {
  display: flex;
  margin: 10px;
  align-items: center;
}

</style>



